//     费用收支对账台账：Expense

import React, { useState } from 'react'
import 'antd/dist/antd.css'
import './index.scss'

import { Select, Form, Input, DatePicker, Space, Button, Table, Modal } from 'antd'


// 表格数据列表对象
const data = []
for (let i = 1; i <= 46; i++) {
    data.push({
        key: i,
        time: '2018/01/01 14:32:51',
        loan_no: '1000001',
        principal: '收入 10000.00',
        interest: '收入 320.00',
        reconciliation_personnel: 'admin',
        reconciliation_remarks: '',
        reversal_description: '',
    })
}

const columns = [
    {
        title: '对账日期',
        dataIndex: 'time',
        key: 'time',
        align: 'center',
    },
    {
        title: '借款编号',
        dataIndex: 'loan_no',
        key: 'loan_no',
        align: 'center',
    },
    {
        title: '本金(元)',
        dataIndex: 'principal',
        key: 'principal',
        align: 'center',
    },
    {
        title: '利息(元)',
        dataIndex: 'interest',
        key: 'interest',
        align: 'center',
    },
    {
        title: '对账人员',
        dataIndex: 'reconciliation_personnel',
        key: 'reconciliation_personnel',
        align: 'center',
    },
    {
        title: '对账备注',
        dataIndex: 'reconciliation_remarks',
        key: 'reconciliation_remarks',
        align: 'center',
    },
    {
        title: '冲正说明',
        dataIndex: 'reversal_description',
        key: 'reversal_description',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'key',
        align: 'center',
        width: 200,
        render: text =>
            <div className="spans">
                <Button size="small" type='text'>撤销</Button>
            </div>
    },

]

export default function Expense() {

    const { RangePicker } = DatePicker
    const [stat, getState] = useState(false);
    const daoru = () => {
        getState(true)
    }
    const handleOk = () => {
        getState(false);
    };
    const handleCancel = () => {
        getState(false);
    };

    return (
        <div className='expense'>
            {/* 头部搜索及输入框 */}
            <div className="bank_head">
                <Form layout="inline">
                    <Form.Item>
                        <Input placeholder="借方账号" />
                    </Form.Item>

                    <Form.Item>
                        <Space direction="vertical" size={12}>
                            <RangePicker />
                        </Space>
                    </Form.Item>

                    <Form.Item className="chaxun">
                        <Button type="primary">查询</Button>
                    </Form.Item>
                </Form>
            </div>

            {/* 表格主体 */}
            <div className='bank_body'>
                {/* 表格头 */}
                <div className="bank_body_head">
                    <p className="text">数据列表</p>
                    <div className="body_head_right">
                        <Button type="primary" onClick={daoru}>导入</Button>
                        <Button>导出</Button>
                    </div>
                </div>
                {/* 表格主体 */}
                <Table bordered columns={columns} dataSource={data} />
            </div>
        </div>
    )
}
